<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8">
<title>存管系统对接公告</title>
<script type="text/javascript" src="./js/flexible.js"></script>
<style>
*{
	margin: 0;
	padding: 0;
}
img{
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}
li{
	list-style: none;
	text-align: left;
	padding-left: 5px;
}
a{
	text-decoration: none;
	color: #FFF;
}
.count-down-wrap {
	position: absolute;
	left: 50%;
	display: flex;
	justify-content: space-between;
}
.item {
	color: #fffefe;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.number {
	display: flex;
	align-items: center;
}
.number p {
	font-size: 20px;
}
.flex-1 {
	flex: 1;
}
.flex-2 {
	flex: 2;
}
</style>
</head>
<body>
<div style="position: relative;width: 100%;text-align: center;">
	<img src="http://laicunba.b0.upaiyun.com/lcb/activity/bank_depository.jpg">
	<div class="count-down-wrap">
		<div class="item">
			<div class="flex-2 number days">
				<p>##</p>
			</div>
			<div class="flex-1">天</div>
		</div>
		<div class="item">
			<div class="flex-2 number hours">
				<p>##</p>
			</div>
			<div class="flex-1">时</div>
		</div>
		<div class="item">
			<div class="flex-2 number minutes">
				<p>##</p>
			</div>
			<div class="flex-1">分</div>
		</div>
		<div class="item">
			<div class="flex-2 number seconds">
				<p>##</p>
			</div>
			<div class="flex-1">秒</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(function(){
	var radio = $(window).width() / 750;
	function rdist(num){
		return Math.floor(radio*num) + "px";
	};
	$(".count-down-wrap").css({
		width: rdist(418),
		height: rdist(103),
		marginLeft: rdist(-210),
		top: rdist(634)
	});
	$(".item").css({
		width: rdist(86),
		height: rdist(103)
	});
	
	var endTime = '${endDate}';
	var nowTime = '${nowDate}';
	var countDown = (endTime - nowTime)/1000;
	var timeo;
	startCountDown();
	
	function startCountDown(){
		if(countDown <= 0) {
			clearTimeout(timeo);
			$(".days p").text("00");
			$(".hours p").text("00");
			$(".minutes p").text("00");
			$(".seconds p").text("00");
			return;
		}
		var d = Math.floor(countDown/3600/24);
		var h = Math.floor(countDown/3600%24);
		var m = Math.floor((countDown%3600)/60);
		var s = Math.floor((countDown%3600)%60);
		$(".days p").text(d>=10 ? d : '0'+d);
		$(".hours p").text(h>=10 ? h : '0'+h);
		$(".minutes p").text(m>=10 ? m : '0'+m);
		$(".seconds p").text(s>=10 ? s : '0'+s);
		countDown--;
		timeo = setTimeout(function() {
			startCountDown();
		}, 1000);
	}
	
});
</script>
</body>
</html>